<template>
    <div>
        <div style="margin: 20px 5px 10px 5px;padding: 5px;">
            <el-tooltip effect="dark" content="新增班级" placement="bottom">
                <el-button type="success" @click="openWindow('classesChild',null)" icon="el-icon-plus"> 新增班级</el-button>
            </el-tooltip>
        </div>

        <div style="margin: 5px;padding: 5px;">
            <el-table :header-cell-style="{background:'#67C23A',color:'white',fontSize:'15px'}" :data="classesList" v-loading="loading" size="mini" border stripe :height="500">
                <el-table-column type="index" align="center"></el-table-column>
                <el-table-column prop="classesName" label="班级名称" align="center">
                    <template slot-scope="scope">
                        {{scope.row.classesName}}
                        <el-tag :type="scope.row.invalid == '1'? 'success':(scope.row.invalid == '2' ? 'warning' : 'danger')" size="mini">
                            {{scope.row.invalid == '1'? '进行中':(scope.row.invalid == '2' ? '已合班' : '已毕业')}}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="curriculumName" label="所属阶段" align="center"></el-table-column>
                <el-table-column prop="startTime" label="开班时间" align="center">
                    <template slot-scope="scope">{{$YEAR_MONTH_DAY(scope.row.startTime)}}</template>
                </el-table-column>
                <el-table-column prop="endTime" label="毕业时间" align="center">
                    <template slot-scope="scope">{{$YEAR_MONTH_DAY(scope.row.endTime)}}</template>
                </el-table-column>
                <el-table-column prop="personNumber" label="班级人数" align="center"></el-table-column>
                <el-table-column prop="teachers" label="带班教师" align="center"></el-table-column>
            </el-table>
        </div>

        <div style="margin: 5px;padding: 5px;text-align:center">
            <el-pagination
                    layout="total,prev,pager,next"
                    :total="params.total"
                    :page-size="params.size"
                    :current-page="params.page"
                    :hide-on-single-page="false"
                    @size-change="handleSizeChange"
                    @current-change="handlePageChange"></el-pagination>
        </div>

        <classes-child ref="classesChild"></classes-child>
    </div>
</template>
<script>

    import { getClassesList } from "@/api/quality/classes";

    export default {
        name: 'classes-index',
        components:{
            ClassesChild:()=>import("@/views/quality/classes-child.vue")
        },
        data(){
            return {
                loading:true,
                miniValue: false,
                classesList:[],
                params:{page:1,size:12,total:0}
            }
        },
        methods:{
            openWindow(name,data){
                if(data  == null){
                    this.$refs[name].date = [];
                    this.$refs[name].classes = {};
                    this.$refs[name].value = true;
                }else{
                    if(data.invalid != '1'){
                        this.$message.error("不是进行中的班级,则无法操作");
                        return false;
                    }else{
                        let date = [];
                        date.push(this.$YEAR_MONTH_DAY(data.startTime));
                        date.push(this.$YEAR_MONTH_DAY(data.endTime));
                        this.$refs[name].date = date;
                        this.$refs[name].classes = data;
                        this.$refs[name].value = true;
                    }
                }
            },
            handleSizeChange(val){
                this.params.size = val;
                this.getClassesList(this.params);
            },
            handlePageChange(val){
                this.params.page = val;
                this.getClassesList(this.params);
            },
            getClassesList(data){
                getClassesList(data).then(res=>{
                    if(res.data.success){
                        this.classesList = res.data.data.rows;
                        this.params.total = res.data.data.total;
                        this.loading = false;
                    }
                });
            }
        },
        created(){
            this.getClassesList(this.params);
        }
    }
</script>
<style>

</style>